<template>
	<div class="container" @touchmove.prevent>
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<img v-if="show_guide" class="guide-img" :src="guide_img" />
		<div v-if="downloadImg" class="blessing" id="download">
			<van-image width="100%" height="100%" :src="downloadImg" fit="scale-down"></van-image>
			<div class="blessing-text-box">
				<div v-if="navActive == 2" class="blessing-text set-text">{{input_text}} <br/></div>
				<van-image 
					v-if="navActive == 1 && blessing_text" 
					class="blessing-text" 
					width="300px"
					height="86px"
					:src="blessing_text" 
					fit="scale-down">
				</van-image>
				<div v-if="username" class="username"> —— {{username}} </div>
			</div>
		</div>
		<div class="popup" v-if="show_box">
			<div class="popup-tab">
				<div>
					<van-button 
						:class="navActive == item.id ? 'popup-tab-button active':'popup-tab-button'"
						size="small"
						v-for="item in tabList" 
						:key="item.id" 
						@click="toggleNav(item.id)">
						{{item.name}}
					</van-button>
				</div>
				<van-image class="preview" width="65" @click="showInputBox(false)" :src="preview_img" fit="scale-down"></van-image>
			</div>
			<!-- <div> -->
			<div class="popup-content">
				<!-- <div v-if="navActive == 1" > -->
				<div v-if="navActive == 1" class="popup-content-default" >
					<!-- {{navActive}} -->
					<div 
						:class="currentIndex == item.id ?'popup-content-default-item text-active':'popup-content-default-item'"
						v-for="item in textList" 
						:key="item.id" 
						@click="setBlessing(item.id)">
						{{item.text}}
					</div>
				</div>
				<!-- <div v-else> -->
				<div v-if="navActive == 2">
					<!-- <div>{{navActive}}</div> -->
					<van-field
						class="input-text"
						v-model="input_text"
						rows="2"
						autosize
						type="textarea"
						maxlength="30"
						placeholder="请输入留言"
						show-word-limit
						@input="inputDIYText"
						@focus="onFocusEvent" 
						@blur="onBlurEvent"
					/>
				</div>
				<div class="username">
					<span class="input-username-desc">你的名字</span>
					<van-field class="input-username" maxlength="5" @focus="onFocusEvent" @blur="onBlurEvent" v-model="username" />
				</div>
			</div>
		</div>
		<div v-else class="show-preview" @click="showInputBox(true)">
			<van-image width="70" :src="show_preview" fit="scale-down"></van-image>
		</div>
		<div class="next-button">
			<van-image v-if="show_next_button" @click="checkNameAndText" width="100" :src="next_button" fit="scale-down"></van-image>
		</div>

		<div class="wait" v-if="show_wait">
			<img class="wait-mouse" src="http://h5static.weiyoho.com/assets/theme/mouse.png" />
			<div class="tip">客官稍等，马上就好</div>
			<!-- <img class="wait-text" src="http://h5static.weiyoho.com/assets/share/text.png" /> -->
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";
import { Image as VantImage, Toast,Button,Field } from "vant";
import html2canvas from "html2canvas"
export default {
	name: "blessing",
	components: {
		[VantImage.name]: VantImage,
		[Toast.name]: Toast,
		[Button.name]: Button,
		[Field.name]: Field,
	},
    data() {
      return {
		downloadUrl: '',
		show_box: true,
		show_wait:false,
		username: '',
		blessing_text: '',
		input_text: '',
		show_next_button: true,
		downloadImg: '',
		next_button: require('../assets/calendar/finish.png'),
		// next_button: 'http://h5static.weiyoho.com/assets/calendar/finish.png',
		text_box: 'http://h5static.weiyoho.com/assets/picture/text-box.png',
		preview_img: 'http://h5static.weiyoho.com/assets/calendar/preview.png',
		show_preview: require('../assets/calendar/show-preview.png'),
		// show_preview: 'http://h5static.weiyoho.com/assets/calendar/show-preview.png',
		navActive: 1,
		currentIndex: 1,
		show_guide: true,
		guide_img: 'http://h5static.weiyoho.com/assets/guide-2.png',
		tabList:[
			{
				id: 1,
				name: '一键祝福'
			},
			{
				id: 2,
				name: '文案DIY'
			}
		],
		textList: [
			{
				id: 1,
				text: '财源滚滚事业旺',
			},
			{
				id: 2,
				text: '大吉大利喜气扬',
			},
			{
				id: 3,
				text: '多吃不胖烦恼全消',
			},
			{
				id: 4,
				text: '工作顺利升职加薪',
			},
			{
				id: 5,
				text: '特别能挣日进斗金',
			},
			{
				id: 6,
				text: '身体健康平平安安',
			}
		],
		defaultText:[
			{id: 1,img: require('../assets/calendar/li-text1.png'),},
			{id: 2,img: require('../assets/calendar/li-text2.png'),},
			{id: 3,img: require('../assets/calendar/li-text3.png'),},
			{id: 4,img: require('../assets/calendar/li-text4.png'),},
			{id: 5,img: require('../assets/calendar/li-text5.png'),},
			{id: 6,img: require('../assets/calendar/li-text6.png'),},
			{id: 7,img: require('../assets/calendar/li-text7.png'),}
		]
      };
	},
	// computed: {
	// 	...mapState({
	// 		downloadImg: state => state.downloadImg
	// 	})
	// },
	mounted() {
		this.blessing_text = this.defaultText[0].img;
		localStorage.getItem("CALENDAR_BLESSING") ? this.show_guide = false : localStorage.setItem("CALENDAR_BLESSING", 1);
		this.preload()
	},
    methods: {
		onDownloadPic() {
			this.show_wait = true
			html2canvas(document.querySelector("#download"), {
				useCORS: true,
				backgroundColor: null
				// scale: 2,
			}).then(canvas => {
				this.downloadUrl = canvas.toDataURL("image/jpeg");
				this.$store.commit("updateDownloadImg", this.downloadUrl);
				this.uploadImg(this.downloadUrl);
				// this.$router.push({ name: 'share', params: { id: 2, downloadImg: this.downloadUrl }});
			});
		},
		uploadImg(imgurl){
			this.$http({
				method:'post',
				url:'http://h5shu.weiyoho.com',
				data:{    //这里是发送给后台的数据
					  img: imgurl
				}
			}).then((response) => {          //这里使用了ES6的语法
				let url = '/share?id=2&downloadImg=' + response.data.url
				this.$store.commit("updateShowWaiting", false)
				this.$router.replace(url)
			})
		},
		preload() {
			let image = new Image()
			image.src = this.$store.state.downloadImg
			image.onload = () => {
				this.downloadImg = this.$store.state.downloadImg
			}
		},
		onBlurEvent(){
			setTimeout(function () {
				let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
				window.scrollTo(0, Math.max(scrollHeight - 1, 0));
			}, 100);
			this.show_next_button = true
		},
		onFocusEvent(){
			this.show_next_button = false
		},
		setBlessing(index){
			this.currentIndex = index
			this.blessing_text = this.defaultText[--index].img;
		},
		toggleNav(index){
			this.navActive = index
			this.currentIndex = 1
		},
		inputDIYText(value){
			console.log("DIY-value:", value)
		},
		showInputBox(flag){
			this.show_box = flag;
		},
		hideGuide(){
			this.show_guide = false
		},
		checkNameAndText(){
			if(this.navActive == 2 && !this.input_text){
				Toast('请选择文案或输入你的祝福');
				return
			}
			if(!this.username){
				Toast('请输入你的名字');
				return
			}
			this.onDownloadPic()
		},
		/**
		 * @desc 跳转页面
		 */
		// pageTo(url){
		// 	this.onDownloadPic();
		// 	this.$router.push(url)
		// }
	},
	
}
</script>

<style lang="less" scoped="scoped">
	.container{
		position: relative;
		.guide-mask{
			width: 100vw;
			height: 100vh;
			position: absolute;
			background-color: #000000;
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.guide-img{
			position: absolute;
			top: 10vh;
			left: 10%;
			width: 200px;
			z-index: 999;
		}
		.popup{
			position: absolute;
			width: 90%;
			top: 20vh;
			left: 5%;
			&-tab{
				display: flex;
				justify-content: space-between;
				position: position;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;
				&-button{
					width: 70px !important;
					border: 0;
					margin: 0;
					color: #b62431;
					background-color: #fff5ec;
					font-weight: 600;
				}
			}
			&-content{
				background-color: #fff5ec;
				position: relative;
				width: 100%;
				padding: 15px;
				box-sizing: border-box;
				&-default{
					background-color: #ffffff;
					border: 2px solid #b62431;
					text-align: left;
					padding: 0 10px;
					border-radius: 10px;
					font-size: 14px;
					// max-height: 150px;
					// overflow: scroll;
					&-item{
						line-height: 28px;
					}
				}
			}
			.username{
				margin-top: 10px;
				display: flex;
				justify-content: center;
				.input-username{
					border: 2px solid #b62431;
					margin-left: 10px;
					border-radius: 5px;
					width: 100px;
					padding: 0 5px;
				}
			}
			.input-text{
				border: 2px solid #b62431;
				border-radius: 5px;
			}
		}
		.active{
			background-color: #b62431 !important;
			color: #ffffff !important;
		}
		.text-active{
			color: #b62431;
		}
		.preview{
			position: relative;
			// left: 130px;
		}
		.show-preview{
			position: absolute;
			bottom: 7vh;
			right: 10px;
		}
	.blessing{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		&-box{
			position: absolute;
			min-height: 30%;
			width: 70%;
			top: 25%;
			left: 10%;
			padding: 20px;
			background-color: #ffffff;
			.input-username-desc{
				border: 1px solid #000000;
				padding: 1px;
			}
			.input-username{
				border: 1px solid #000000;
				width: 100px;
				margin-left: 20px;
			}
			.input-text{
				border: 1px solid #000000;
			}
		}
		&-text-box{
			position: absolute;
			bottom: 25vh;
			width: 80%;
			left: 10%;
			min-height: 13%;
			font-size: 14px;
			font-weight: 600;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			color: #b62431;
			.username{
				position: absolute;
				top: 14vh;
				// top: 10vh;
				// transform: translateX(30px);
			}
		}
		.add-bgurl{
			background: url(../assets/picture/text-box.png) no-repeat;
			background-size: 100% 100%;
		}
		.set-text{
			font-size: 14px;
			color: #b62431;
			text-align: center;
			width: 100%;
			bottom: 80px;
			margin-top: 10px;
			max-width: 260px;
			.username{
				position: relative;
				// top: -20px;
				left: 30px;
				text-align: center !important;
			}
		}
	}
	.next-button{
		position: absolute;
		left: 37%;
		bottom: 40px;
	}

	.wait{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background: url(../assets/theme/bg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		z-index: 999;
		.tip {
			position: absolute;
			top: 300px;
			font-size: 22px;
      		color: #fff;
		}
		&-mouse{
			position: absolute;
			top: 150px;
			width: 100px;
			-webkit-animation: mouse-down-up-ani 2s ease-in-out infinite;
		}
		&-text{
			position: absolute;
			top: 300px;
			width: 200px;
		}
	}
}
</style>
